<template>
	<view>
		<view class="content" v-if="realStatu === 1">
			<view class="real-con">
				<view class="real-item">
					<view>姓名</view>
					<view style="margin-left: auto;">
						<u--input placeholder="请输入姓名" border="none" v-model="cardFront" placeholderStyle="color:#999999"
							fontSize="27rpx" inputAlign="right"></u--input>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
				<view class="real-item">
					<view>身份证号</view>
					<view style="margin-left: auto;">
						<u--input placeholder="请输入身份证号" border="none" v-model="cardBack"
							placeholderStyle="color:#999999" fontSize="27rpx" inputAlign="right"
							type="idcard"></u--input>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
				<view class="real-item">
					<view>地址</view>
					<view style="margin-left: auto;">
						<u--input placeholder="请输入地址" border="none" v-model="name" placeholderStyle="color:#999999"
							fontSize="27rpx" inputAlign="right"></u--input>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
				<view class="real-item">
					<view>有效期</view>
					<view v-if="start" @click="startShow=true" style="color: #000000;flex: 1;text-align: center;">
						{{start}}
					</view>
					<view v-else @click="startShow=true" style="color: #999999;flex: 1;text-align: center;">开始日期</view>
					<view>-</view>
					<view v-if="end" @click="endShow=true" style="color: #000000;flex: 1;text-align: center;">{{end}}
					</view>
					<view v-else @click="endShow=true" style="color: #999999;flex: 1;text-align: center;">结束日期</view>
				</view>
			</view>
			<view class="real-con" style="margin-top: 23rpx;padding: 23rpx;">
				<view>身份证照片</view>
				<view class="flex-row" style="justify-content: space-between;margin-top: 15rpx;">
					<view class="real-upload">
						<view style="width: 250rpx;height: 175rpx;">
							<u-upload @afterRead="afterRead" :maxCount="1" width="250" height="175">
								<image v-if="imgUrl" :src="imgUrl" style="width: 250rpx;height: 175rpx;display: block;">
								</image>
								<image v-else :src="$IMG_URL+'portraitFace.png'" mode="widthFix"
									style="width: 250rpx;height: 175rpx;"></image>
							</u-upload>
						</view>
						<view style="margin-top: 15rpx;">上传身份证 <text style="color: #0277DE;">人像面</text></view>

					</view>
					<view class="real-upload">
						<view style="width: 250rpx;height: 175rpx;">
							<u-upload @afterRead="afterReadA" :maxCount="1" width="250" height="175">
								<image v-if="imgUrlA" :src="imgUrlA"
									style="width: 250rpx;height: 175rpx;display: block;"></image>
								<image v-else :src="$IMG_URL+'nationalEmblem.png'" mode="widthFix"
									style="width: 250rpx;height: 175rpx;"></image>
							</u-upload>
						</view>
						<view style="margin-top: 15rpx;">上传身份证 <text style="color: #0277DE;">国徽面</text></view>
					</view>
				</view>
			</view>
			<view class="withdraw-but">
				<u-button type="primary" shape="circle" text="确认" @click="submitForm"></u-button>
			</view>
		</view>
		<view class="real-success" v-if="realStatu === 2">
			<image :src="$IMG_URL+'success.png'" style="width: 146rpx;height: 146rpx;"></image>
			<view style="font-weight: 500;margin-top: 38rpx;">您已通过实名认证</view>
			<view style="margin-top: 15rpx;font-size: 31rpx;color: #999999;">实名信息认证后不可修改</view>
			<view class="real-success-con">
				<view class="flex-row">真实姓名：
					<u--text mode="name" color="#000000" size="31rpx" text="张三三" format="encrypt"></u--text>
				</view>
				<view class="flex-row" style="margin-top: 15rpx;">证件类型：
					<u--text color="#000000" size="31rpx" text="身份证"></u--text>
				</view>
				<view class="flex-row" style="margin-top: 15rpx;">证件类型：
					<text style="color: #000000;">{{idcard.substr(0, 4) + '**********'+idcard.substr(14, 18)}}</text>
				</view>
			</view>
		</view>
		<view class="real-success" v-if="realStatu === 3">
			<image :src="$IMG_URL+'fail.png'" style="width: 146rpx;height: 146rpx;"></image>
			<view style="font-weight: 500;margin-top: 38rpx;">非常抱歉，您未通过实名认证</view>
			<view class="withdraw-but" style="margin-top: 96rpx;">
				<u-button type="primary" shape="circle" text="重新认证" @click="realStatu = 1"></u-button>
			</view>
		</view>
		<u-datetime-picker :show="startShow" v-model="startTime" mode="date" @cancel="startShow = false"
			@confirm="startConfirm"></u-datetime-picker>
		<u-datetime-picker :show="endShow" v-model="endTime" mode="date" @cancel="endShow = false"
			@confirm="endConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/service';
	import {
		realApi
	} from '@/api/user'
	export default {
		data() {
			return {
				name: '',
				idcard: "411425199411100991",
				realStatu: 1,
				startShow: false,
				startTime: Number(new Date()),
				start: '',
				endShow: false,
				endTime: Number(new Date()),
				end: '',
				cardFront: "",
				cardBack: "",
				imgUrl: "",
				imgUrlA: "",

			}
		},
		methods: {
			startConfirm(val) {
				console.log(val);
				this.start = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.startShow = false
			},
			endConfirm(val) {
				this.end = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.endShow = false
			},
			async afterRead(event) {
				const res = await this.uploadFilePromise(event.file.url)
				console.log(111, res);
				this.imgUrl = res.url

			},
			async afterReadA(event) {
				const res = await this.uploadFilePromise(event.file.url)
				this.imgUrlA = res.url
			},
			uploadFilePromise(file) {
				uni.showLoading({
					title: '上传中...'
				});
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + 'common/upload', // 仅为示例，非真实的接口地址
						filePath: file,
						name: 'file',
						success: (res) => {
							console.log(res);
							if (res.data) {
								const idCard = JSON.parse(res.data)
								resolve(idCard)
							}
							uni.hideLoading()
						}
					});
				})
			},
			async submitForm() {

				if (!this.cardFront) {
					uni.$u.toast('请输入姓名')
					return
				}
				if (!this.cardBack) {
					uni.$u.toast('请输入身份证号')
					return
				}
				if (!this.start) {
					uni.$u.toast('请选择开始日期')
					return
				}
				if (!this.end) {
					uni.$u.toast('请选择结束日期')
					return
				}
				if (!this.imgUrl) {
					uni.$u.toast('请上传身份证人像面')
					return
				}
				if (!this.imgUrlA) {
					uni.$u.toast('请上传身份证国徽面')
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				const res = await realApi({
					cardFront: this.cardFront,
					cardBack: this.cardBack,
					cardHold: this.imgUrl,
					validity: this.start + '-' + this.end,
				})
				uni.hideLoading()
				uni.showToast({
					title: '提交成功等待审核'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 23rpx;
	}

	.real-con {
		width: 688rpx;
		padding: 0 23rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 27rpx;
		color: #000000;
	}

	.real-item {
		display: flex;
		align-items: center;
		padding: 31rpx 0;
	}

	.real-upload {
		width: 312rpx;
		height: 250rpx;
		background-color: #E1F1FF;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 19rpx;
		color: #666666;
	}

	.withdraw-but {
		width: 688rpx;
		margin-top: 77rpx;

		& ::v-deep .u-button {
			height: 77rpx !important;
		}
	}

	.real-success {
		width: 100vw;
		min-height: 100vh;
		padding-top: 92rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 35rpx;
		color: #000000;
		background: #FFFFFF;
	}

	.real-success-con {
		width: 688rpx;
		padding: 23rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
		font-size: 31rpx;
		color: #999999;
		margin-top: 62rpx;
	}
</style>